<template>
  <div class="">
    <Row style="margin: 10px 0px;">

      <label style="margin-left: 10px;">角色</label>
      <Select v-model="condition.usertype" style="width:100px">
        <Option v-for="item in roles" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
      <label>姓名</label>
      <Input v-model="condition.username" placeholder="请输入姓名" clearable style="width: 100px"></Input>

      <label style="margin-left: 10px;">电话</label>
      <Input v-model="condition.userphone" placeholder="请输入电话" clearable style="width: 150px"></Input>
      <label style="margin-left: 10px;">警种</label>
      <Input v-model="condition.policeclass" placeholder="请输入警种" clearable style="width: 150px"></Input>
      <label style="margin-left: 10px;">警号</label>
      <Input v-model="condition.usernum" placeholder="请输入警号" clearable style="width: 150px"></Input>
      <label style="margin-left: 10px;">单位</label>
      <Select v-model="condition.unit" style="width: 150px">
        <Option v-for="item in units" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
      <!-- <Input v-model="condition.unit" placeholder="请输入单位" clearable style="width: 150px"></Input> -->
      <label style="margin-left: 10px;">职务</label>
      <Input v-model="condition.job" placeholder="请输入职务" clearable style="width: 150px"></Input>
      <span style="margin: 0px 10px;">
        <button type="button" class="ivu-btn ivu-btn-primary"  @click="search($getCondition(condition))">
          <i class="ivu-icon ivu-icon-search"></i>
          <span>查询</span>
        </button>
      </span>
      <span style="margin: 0px 10px;">
        <button type="button" class="ivu-btn ivu-btn-primary" @click="addRole">
          <i class="ivu-icon ivu-icon-plus"></i>
          <span>新增</span>
        </button>
      </span>

      <Upload action="rs/exam/upload" class="fr" :on-success="upSuccess" :on-error="upError" :on-progress="upProgress" :show-upload-list="false">
        <Button type="ghost" icon="ios-cloud-upload-outline">批量导入</Button>
      </Upload>
    </Row>
    <Table :columns="columns" :data="model.rows" border></Table>
    <Row style="margin: 10px 0px;">
        <Page :total="model.count" :page-size="model.pageSize" show-elevator style="text-align: center;" @on-change="loadPage"></Page>
    </Row>
    <Modal :width="900" v-model="show" title="人员设置" @on-visible-change="changed">
      <Form ref="formValidate" :model="role" :rules="ruleValidate" :label-width="80">
        <FormItem label="姓名" prop="username">
            <Input v-model="role.username" placeholder="输入姓名"></Input>
        </FormItem>
        <FormItem label="性别">
            <RadioGroup v-model="role.sex">
                <Radio label="男">男</Radio>
                <Radio label="女">女</Radio>
            </RadioGroup>
        </FormItem>
        <FormItem label="身份证号" prop="idnumber">
            <Input v-model="role.idnumber" placeholder="输入身份证号"></Input>
        </FormItem>
        <FormItem label="电话号码" prop="userphone">
            <Input v-model="role.userphone" placeholder="输入电话号码"></Input>
        </FormItem>
        <FormItem label="警种" prop="userphone">
            <Input v-model="role.policeclass" placeholder="输入警种"></Input>
        </FormItem>
        <FormItem label="警号" prop="usernum">
            <Input v-model="role.usernum" placeholder="输入警号"></Input>
        </FormItem>
        <!-- <FormItem label="单位" prop="userphone">
            <Input v-model="role.unit" placeholder="输入单位"></Input>
        </FormItem> -->
        <FormItem label="单位">
          <Select v-model="role.unit" prop="unit">
            <Option v-for="item in units" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="职务" prop="userphone">
            <Input v-model="role.job" placeholder="输入职务"></Input>
        </FormItem>
        <!-- <FormItem label="电子邮箱">
            <Input v-model="role.emal" placeholder="输入电子邮箱"></Input>
        </FormItem> -->
        <FormItem label="角色信息">
            <RadioGroup v-model="role.usertype">
                <Radio label="管理员">管理员</Radio>
                <Radio label="考生">考生</Radio>
            </RadioGroup>
        </FormItem>
        <!-- <FormItem label="考号" v-if="role.usertype === '考生'">
            <span>{{role.examnum}}</span>
        </FormItem>
        <FormItem label="登录密码" prop="password" v-if="role.usertype === '管理员'">
            <Input v-model="role.password" placeholder="输入登录密码"></Input>
        </FormItem> -->
      </Form>
      <div slot="footer">
        <Button type="primary" size="large" long  @click="confirm('formValidate')">确定</Button>
      </div>
    </Modal>
    <Spin size="large" fix v-if="model.state === '查询'"></Spin>
  </div>

</template>
<script>
import util from '@/libs/util.js';
import PagedList from '@/plugins/PagedList.js'
import axios from 'axios'
    export default {
        data () {
            return {
              model: new PagedList('rs/sql/singleTable_OrderBy', 20,
              {items: "'*'", tablename: "'usertable'", orderitem: "'id'"}),
              show: false,
              condition: {
                userName: '',
                usertype: '',
                usernum: '',
                userphone: ''
              },
              role: {
                username: '',
                sex: '男',
                usernum: '',
                idnumber: '',
                userphone: '',
                unit: '',
                policeclass: '',
                job: '',
                emal: '',
                usertype: '考生',
                examnum: util.getCanNumver(),
                password: ''
              },
              ruleValidate: {
                   username: [
                       { required: true, message: '用户名不能为空', trigger: 'blur' }
                   ],
                   usernum: [
                     { required: true, message: '警号不能为空', trigger: 'blur' }
                   ],
                   idnumber: [
                       { required: true, message: '身份证不能为空', trigger: 'blur' }
                   ],
                   userphone: [
                       { required: true, message: '电话不能为空', trigger: 'blur' }
                   ],
                   password: [
                       { required: true, message: '密码不能为空', trigger: 'blur' }
                   ],
                   usernum: [
                     { required: true, message: '警号不能为空', trigger: 'blur' }
                   ],
                   unit: [
                     { required: true, message: '单位不能为空', trigger: 'blur' }
                   ]
               },
                columns: [
                    {
                      title: '序号',
                      type: 'index',
                      align: 'center',
                      width: 80
                    },
                    {
                        title: '姓名',
                        key: 'username',
                        width: 100
                    },
                    {
                        title: '性别',
                        key: 'sex',
                        width: 70
                    },
                    {
                        title: '电话号码',
                        key: 'userphone',
                        width: 120
                    },
                    {
                        title: '警种',
                        key: 'policeclass',
                        width: 120
                    },
                    {
                        title: '警号',
                        key: 'usernum',
                        width: 130
                    },
                    {
                        title: '身份证号码',
                        key: 'idnumber',
                        width: 180
                    },
                    {
                        title: '单位',
                        key: 'unit'
                    },
                    {
                        title: '职务',
                        key: 'job',
                        width: 100
                    },
                    {
                        title: '用户类型',
                        key: 'usertype',
                        width: 90
                    },
                    // {
                    //     title: '考号',
                    //     key: 'examnum',
                    //     width: 150
                    // },
                    // {
                    //     title: '电子邮箱',
                    //     key: 'emal',
                    //     width: 200
                    // },
                    // {
                    //     title: '最后一次登录时间',
                    //     key: 'singdate',
                    //     width: 200
                    // },
                    {
                        title: '操作',
                        width: 160,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                          this.modify(params.row)
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'primary'
                                    },
                                    on: {
                                        click: () => {
                                          this.deleteRow(params.row)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                roles: [
                    {
                        value: '',
                        label: '全部'
                    },
                    {
                        value: '考生',
                        label: '考生'
                    },
                    {
                        value: '管理员',
                        label: '管理员'
                    }
                ]
            };
        },
        mounted () {
          this.search('1=1')
        },
        methods: {
          search (condition) {
            this.model.search(condition)
          },
          addRole () {
            this.show = true;
          },
          loadPage (index) {
              // console.log(`加载第${index}页数据`);
              this.model.loadPage(index)
          },
           confirm (name) {
             this.model.state = '查询'
             this.$refs[name].validate((valid) => {
                  if (valid) {
                    // 提交到后台后将对话窗关闭
                    if (!this.role.id) {
                      this.role.creatuserpp = '测试'
                      this.role.creatusertime = this.$formatDateTime(new Date())
                      this.password = '000000'
                    }
                    if (this.role.usertype === '管理员') {
                      this.role.examnum = null
                    }
                    axios.post('rs/logic/adduser', {data: this.role}).then(res => {
                      this.model.refresh()
                      this.show = false
                    }).catch((error) => {
                      console.log(error);
                      this.$Message.error('保存失败');
                    })

                  }
              })
           },
           changed (status) {
             this.model.state = '正确'
             if (!status) {
               this.role = {
                 username: '',
                 usernum: '',
                 idnumber: '',
                 userphone: '',
                 emal: '',
                 sex: '男',
                 unit: '',
                 policeclass: '',
                 job: '',
                 usertype: '考生',
                 examnum: util.getCanNumver(),
                 password: ''
               }
                this.$refs['formValidate'].resetFields();
             }
           },
           modify (row) {
             this.role = Object.assign({}, row)
             this.show = true
           },
           deleteRow (row) {
             this.$Modal.confirm({title: '删除提醒', content: '删除后不可恢复，确认删除吗？', onOk: () => {
               axios.delete('rs/entity/usertable/'+ row.id).then((res) => {
                 this.model.refresh()
               })
             }})
           },
           upSuccess (res, file, fileList) {
             this.model.state = '正确'
             this.$Message.success({
               content: '批量导入成功'
             })
             this.search('1=1')
           },
           upError (error, file, fileList) {
             this.model.state = '正确'
             this.$Message.error({
               content: '上传失败'
             })
           },
           upProgress (events, file, fileList) {
             this.model.state = '查询'
           }
        },
        watch: {
          'role.role' (val) {
            if (val === 'examinee') {
              this.role.canNumber = util.getCanNumver()
            } else {
              this.role.canNumber = ''
            }
          }
        },
        computed: {
          units () {
            return this.$getParams('单位名称')
          }
        }
    };
</script>
